<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title>jQBox2D</title>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="assets/ddr-ecma5-1.2.1-min.js"></script>
    <script type="text/javascript" src="assets/Box2dWeb-2.1.a.3.js"></script>
    <script type="text/javascript" src="alpha/jQbox2D.Alpha.js"></script>
    <style type="text/css">
  
        #world-box {
            position: relative;
            width: 640px;
            height: 480px;
            border: 1px solid black;
            font-family: Arial, Helvetica, sans-serif;
            color: white;
        }
        
        #world-box ul, #world-box ol, #world-box li {
            float: left;
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        img {
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            -moz-user-modify: none;
        }
        
        #world-box li.small-box {
            width: 20px;
            height: 20px;
            position: absolute;
            background: red;
            border: 1px solid blue;
            padding: 10px;
            margin: 0;
        }
        
        #world-box li.small-circle {
            position: absolute;
            background: gray;
            border: 1px solid green;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            width: 1.0em;
            height: 1.0em;
            margin: 0;
            padding: 10px;
            overflow: hidden;
            text-align: center;
        }
        
        #world-box li.small-box.body-sleeping {
            background: green;
        }
        
        #world-box li.small-circle.body-sleeping {
            background: green;
        }
        
    </style>
     <script type="text/javascript">
		$(document).ready(function (){
		    $('#world-box').jQb2({
		        gravity: [0, 10],
		        sleep: true,
		        debug: true,
		        mouse: true,
		        autobody: true,
		        bounds: true,
		        controls: true,
		        paused: true,
		        fps: 30
		    });
		    $('#testerID').jQb2('body');
		});
    </script>
</head>

<body>
    <div id="world-box">
        <ul>
            <li style="top: 80px; left: 80px; position:absolute;">
            <img src="assets/polygon.png" alt="polygon" width="123" height="112" usemap="m_1">
            <map id="m_1">
                <area shape="circle" coords="47,20,18" href="javascript:;" alt="">
                <area shape="rect" coords="73,61,114,102" href="javascript:;" alt="">
                <area shape="poly" coords="25,7,9,53,23,90,81,106,106,64,96,23" alt="">
            </map>
            </li>

            <li class="small-box" style="top: 200px; left: 40px;">test</li>

            <li class="small-circle jQb2-circle" style="top: 300px; left: 40px;">&times;</li>

        </ul>
        <ul>
            <li class="small-box" style="top: 200px; right: 140px;">bunch</li>

            <li class="small-circle jQb2-circle" style="top: 300px; right: 120px;">A</li>

            <li class="small-circle jQb2-circle" style="top: 340px; right: 140px;">B</li>

            <li class="small-circle jQb2-circle" style="top: 300px; right: 180px;">C</li>
        </ul>
        <ol>
            <li class="small-box jQb2-static" style="top: 190px; right: 40px;">chain</li>

            <li class="small-circle jQb2-circle" style="top: 240px; right: 40px;">A</li>

            <li class="small-circle jQb2-circle" style="top: 280px; right: 40px;">B</li>

            <li class="small-circle jQb2-circle" style="top: 320px; right: 40px;">C</li>

            <li class="small-box" style="top: 360px; right: 40px;">D</li>
        </ol>
        <div id="testerID" style="position: absolute; top: 20px; left: 200px; width: 200px; height: 50px; background:blue;">Defined Body</div>
        <div class="testerClass" style="position: absolute; top: 100px; left: 200px; width: 80px; height: 50px; background:blue;">Defined Body</div>
        <div class="testerClass" style="position: absolute; top: 100px; left: 300px; width: 80px; height: 50px; background:blue;">Defined Body</div>
    </div>
</body>
</html>
